<link href="../../plugins/coreui/coreui.css" rel="stylesheet" />
<link href="../../css/admin.css" rel="stylesheet" />
<div class="main-container">
	<div class="box box-default box-radius">
		<div class="box-head">
			<button id="btnAdd" class="btn btn-bg-green">添加按钮</button>
		</div>
		<table class="table box-body">
		<thead>
			<tr>
				<th>操作</th>
				<th>菜单</th>
				<th>按钮名称</th>
				<th>按钮代码</th>
				<th>按钮图标</th>
				<th>排序</th>
				<th>启用状态</th>
			</tr>
		</thead>
		<tbody>
			 <%  for(item in btnList){ if(itemLP.size>0){ var selected1=item.status==1?"selected":"";var selected0=item.status==0?"selected":""; %>
				<tr>
					<td><button class='btn btn-green btn-item-update'>修改</button><button data-flag="1" class='btn btn-red btn-item-delete'>删除</button></td>
					<td>${item.menu_name}<input class="btn-item-id" value="${item.id}" type="hidden" /></td>
					<td><input class='form-input btn-name hide' value="<% print(item.name); %>" type='text'/><span><% print(item.name); %></span></td>
					<td><input class='form-input btn-code hide' style='width:90px;' value="<% print(item.code); %>" type='text'/><span><% print(item.code); %></span></td>
					<td><button class='btn btn-green'>选择</button></td>
					<td><input class='form-input btn-seq hide' style='width:60px;' value="<% print(item.seq); %>" type='text'/><span><% print(item.seq); %></span></td>
					<td>
						<select class='form-input btn-status'>
							<option ${selected1} value="1">启用</option>
							<option ${selected0} value="0">隐藏</option>
						</select>
					</td>
				</tr>
				<% }} %> 
		</tbody>
	</table>
	</div>
</div>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script src="../../plugins/layer/layer.js"></script>
<script>
	var d=document;
	function getQueryString(name) { 
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
		var r = window.location.search.substr(1).match(reg); 
		if (r != null) return unescape(r[2]); return null; 
		} 
	$("#btnAdd").click(function(){
		var tr="<tr>"
			+"<td><button class='btn btn-green btn-item-save'>保存</button><button data-flag='0' class='btn btn-green btn-item-cancel'>取消</button></td>"
			+"<td></td>"
			+"<td><input class='form-input btn-name' type='text'/></td>"
			+"<td><input class='form-input btn-code' style='width:90px;' type='text'/></td>"
			+"<td><button class='btn btn-green'>选择</button></td>"
			+"<td><input class='form-input btn-seq' value='0' style='width:60px;' type='number'/></td>"
			+"<td><select class='form-input btn-status'><option value='1'>启用</option><option value='0'>隐藏</option></select></td>"
			+"</tr>"
		
		$("tbody").append(tr);
	});
	$(d).on("click",".btn-item-cancel",function(){
		if($(this).attr("data-flag")=="0"){
			$(this).parent("td").parent("tr").remove();
		}else{
			var obj=$(this).parent("td").parent("tr");
			obj.find("input").css("display","none");
			obj.find("span").css("display","block");
			$(this).html("删除").removeClass("btn-item-cancel").addClass("btn-item-delete");
			obj.find(".btn-item-save").removeClass("btn-item-save").addClass("btn-item-update").html("修改");
		}
	});
	$(d).on("click",".btn-item-update",function(){
		var obj=$(this).parent("td").parent("tr");
		$(this).html("保存").removeClass("btn-item-update").addClass("btn-item-save");
		obj.find(".btn-item-delete").removeClass("btn-item-delete").addClass("btn-item-cancel").html("取消");
		obj.find("input").css("display","block");
		obj.find("span").css("display","none");
	});
	$(d).on("click",".btn-item-save",function(){
		var tr=$(this).parent("td").parent("tr");
		if(tr.find(".btn-name").val()==""){
			layer.tips('按钮名称不能为空', '.btn-name');
			$(this).focus();
			return false;
		}
		var data={"id":tr.find(".btn-item-id").val()};
		data.code=tr.find(".btn-code").val();
		data.name=tr.find(".btn-name").val();
		data.status=tr.find(".btn-status").val();
		data.icon=tr.find(".btn-icon").val();
		data.seq=tr.find(".btn-seq").val();
		data.menu_id=getQueryString("menuId");
		$.post("saveButton",data,function(result){
			if(result.flag){
				layer.alert("保存成功");
				location.reload();
			}else{
				layer.alert(result.msg==null?"保存失败":result.msg);
			}
		});
	});
	$(d).on("click",".btn-item-delete",function(){
		var _this=$(this);
		layer.confirm('删除后不能恢复，确认删除？', {icon: 3, title:'提示'}, function(index){
			var id=_this.parent("td").parent("tr").find(".btn-item-id").val();
			var loadIndex = layer.load();//加载层
			$.post("deleteButtonById",{"buttonId":id},function(result){
				layer.close(loadIndex);
				if(result.flag){
					layer.alert("删除成功");
					location.reload();
				}else{
					layer.alert(result.msg==null?"删除失败":result.msg);
				}
			});
			layer.close(index);
		});
	});
</script>